<template>
  <a-card :bordered="false" class="card-area">
    <a-collapse accordion @change="itemChange" v-model="activeKey" :bordered="false">
      <template #expandIcon="props">
        <a-icon type="caret-right" :rotate="props.isActive ? 90 : 0" />
      </template>
      <a-collapse-panel :header="item.showGroupName" v-for="(item, index) in foldList" :key="index + ''" class="custom-panel">
        <div v-for="(val, i) in item.chartsList" :key="i">
          <div v-if="val.showChart==='03'" class="statisticStyle">
            <h4>{{val.text}}</h4>
            <div v-for="(f, g) in item.objArr" :key="g" class="allStyle">
              <a-statistic :title="f.name" :value="f.value" v-if="val.hawkId === f.hawkId" :precision="val.chartOptions.precision"  :decimalSeparator="val.chartOptions.decimalSeparator" :groupSeparator="val.chartOptions.groupSeparator" :prefix='val.chartOptions.prefix' :suffix='val.chartOptions.suffix' :valueStyle='val.chartOptions.valueStyle' class="staticMR"/>
            </div>
          </div>
          <a-col v-else :span='spanNum'>
            <apexchart :ref="'chartsData' + index + i" :type="chartsType" height="350" :options="val.chartOptions" :series="series"></apexchart>
          </a-col>
        </div>
      </a-collapse-panel>
    </a-collapse>
    <a-button type="dashed" style="top:20px; width: 100%" @click="getData"><a-icon type="redo"/>刷  新</a-button>
  </a-card>
</template>
<script>
const setTimes = {}
export default {
  data () {
    return {
      activeKey: '',
      foldList: [],
      spanNum: '',
      chartsType: 'line',
      series: []
    }
  },
  methods: {
    getData () {
      this.foldList = []
      this.$get('hawk/show/').then((res) => {
        for (let key in res.data) {
          let obj2 = {
            showGroupName: key,
            chartsList: [],
            objArr: []
          }
          res.data[key].forEach((v, i) => {
            let obj3 = {
              chartOptions: JSON.parse(v.showChartParams),
              hawkId: v.hawkId,
              showChart: v.showChart,
              text: v.hawkName
            }
            obj2.showChart = v.showChart
            obj2.chartsList.push(obj3)
          })
          this.foldList.push(obj2)
        }
      })
    },
    itemChange (keyword) {
      if (keyword) {
        for (let i in setTimes) {
          if (i !== keyword) {
            clearInterval(setTimes[i])
            delete setTimes[keyword]
          }
        }
        this.getChartsData(keyword)
        setTimes[keyword] = setInterval(() => {
          this.getChartsData(keyword)
        }, 1000)
      } else {
        for (let i in setTimes) {
          clearInterval(setTimes[i])
          delete setTimes[i]
        }
      }
    },
    getChartsData (keyword) {
      const newArr = this.foldList[keyword].chartsList.map((val) => {
        return {
          hawkId: val.hawkId,
          showChart: val.showChart,
          maxTimeStamp: val.maxTimeStamp
        }
      })
      let params = {
        graphDataQueryString: encodeURIComponent(JSON.stringify(newArr))
      }
      const foldItem = this.foldList[keyword]
      if (foldItem.chartsList.length >= 2) {
        this.spanNum = 12
      } else {
        this.spanNum = 24
      }
      this.$get('hawk/show/data', params).then((res) => {
        if (res.data) {
          for (var i = 0; i < res.data.length; i++) {
            const element = res.data[i]
            foldItem.chartsList.forEach((e, indx) => {
              if (i === indx) {
                if (e.showChart === '01') {
                  e.maxTimeStamp = element.maxTimeStamp
                  e.chartOptions = {
                    series: element.lineChartDataSeries,
                    chart: {
                      type: e.showChart === '01' ? 'line' : 'radialBar'
                    },
                    title: {
                      text: e.text
                    },
                    xaxis: {
                      categories: element.lineChartXData
                    }
                  }
                } else if (e.showChart === '02') {
                  e.maxTimeStamp = element.maxTimeStamp
                  e.chartOptions = {
                    series: element.radialBarDataSeries,
                    labels: element.radialBarLabel,
                    chart: {
                      type: e.showChart === '02' ? 'radialBar' : 'line'
                    },
                    plotOptions: {
                      radialBar: {
                        dataLabels: {
                          total: {
                            label: e.text
                          }
                        }
                      }
                    }
                  }
                } else if (e.showChart === '03') {
                  foldItem.objArr = []
                  element.listChartData.forEach(it => {
                    this.$set(it, 'hawkId', element.hawkId)
                  })

                  this.$set(element, 'showChart', e.showChart)
                  let arrFilter = res.data.filter((p) => p.showChart === '03')
                  let arr = []
                  arrFilter.forEach(a => {
                    if (a.showChart === '03') {
                      arr.push(a.listChartData)
                    }
                  })
                  let arr1 = arr.reduce((prev, next) => {
                    return prev.concat(next)
                  })
                  foldItem.objArr = arr1
                }
              }
            })
          }
        }
      })
    }
  },
  created () {
    this.getData()
  },
  deactivated () {
    this.itemChange(undefined)
    this.activeKey = undefined
  }
}
</script>
<style lang='less' scoped>
  .custom-panel {
    background: #f7f7f7;
    border-radius: 4px;
    margin-bottom: 24px;
    border: 0;
    overflow: hidden
  }
</style>
<style lang="less">
.card-area{
  .allStyle {
    display: inline-block;
    .staticMR {
      margin-right:50px;
    }
  }
    .statisticStyle {
      padding: 0px 0px 16px 16px;
    }
}
</style>
